/* Copyright 2011 Elektrobit Wireless Communications Oy (EB)


  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License version 2 as 
  published by the Free Software Foundation.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License along
  with this program; if not, write to the Free Software Foundation, Inc.,
  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.


 *All rights reserved 
 *Version:Elektrobit_Qt_1.0.0_20110305 */


import Qt 4.7
import "../script/script.js" as Script

    Item {
        id: menuBarArea
        property variant model: null
        signal buttonClicked(int index)
        width: 120;
        height: 360

        Component {
            id: menuDelegate
            Rectangle {
                width: 100; height: menuPathView.menuHeight
                color: "black"
                radius: 20
                smooth: true
                scale: PathView.menuScale
                border.width: 2
                border.color: "darkgray"
                opacity: PathView.menuOpacity

                gradient: Gradient {
                    GradientStop {position: 0.0; color: "darkblue"}
                    GradientStop {position: 0.5; color: "darkgreen"}

                    GradientStop {position: 1.0; color: "darkblue"}

                }

                Text {
                    anchors.centerIn: parent
                    text: model.modelData.name/*model.modelData.id*/
                    color: "yellow"
                    //font.pointSize: 10
                    smooth: true
                }

                MouseArea {
                    anchors.fill: parent

                    onClicked: {
                        if (index < menuPathView.indexOffset) {
                            menuPathView.currentIndex = menuPathView.count + (index - menuPathView.indexOffset);
                            buttonClicked(index);
                            console.log (index + " is clicked and highlighted. aaaaaaaaa")
                        }
                        else {
                            menuPathView.currentIndex = index - menuPathView.indexOffset;
                            buttonClicked(index);
                            console.log (index + " is clicked and highlighted.")
                        }
//                        menuHLMid.visible = false
                    }
                }

            }
        }

        PathView {
            id: menuPathView
            property real menuHeight: 40    //To define the heigh of each menu bar.
            property real pathLenth: 270    //To define the path lenth of the PathView.
            property real indexOffset: 3    //To define the offset of current index. (Means which index you want to highlight, default index is 0)

            width: menuBarArea.width
            height: menuPathView.pathLenth - (2 * (menuPathView.pathLenth / pathItemCount - menuHeight) + menuHeight)
            anchors.verticalCenter: parent.verticalCenter

            model: menuBarArea.model /*menuLists*/
            delegate: menuDelegate
            pathItemCount: 6
            clip: true

            path: Path {
                id: menuPath
                startX: 80;
                startY: - ((menuPathView.pathLenth / menuPathView.pathItemCount - menuPathView.menuHeight) + menuPathView.menuHeight / 2)

                PathAttribute { name: "menuScale"; value: 0.8 }
                PathLine {id: pathTopPart; x: 65; y: pathMid.y - 60}
                PathAttribute { name: "menuOpacity"; value: 0.5 }

                PathLine {id: pathMid; x: 60; y: (menuPath.startY + menuPathView.pathLenth) / 2 - menuPathView.menuHeight / 2}
                PathAttribute { name: "menuScale"; value: 1.0 }
                PathAttribute { name: "menuOpacity"; value: 1 }

                PathLine {id: pathBottomPart; x: 65; y: pathMid.y + 60}
                PathAttribute { name: "menuOpacity"; value: 0.6 }

                PathLine {id: pathEnd; x: 77; y: menuPath.startY + menuPathView.pathLenth}
                PathAttribute { name: "menuScale"; value: 0.8 }
            }

            onMovementStarted: {/*highLightAni.paused = true;*/ menuHLMid.visible = false }
            onMovementEnded: {
                if (currentIndex + indexOffset < menuPathView.count) {
                    buttonClicked(currentIndex + indexOffset);
                    console.log (currentIndex + indexOffset + " is highlighted")
                }
                else {
                    buttonClicked(currentIndex + indexOffset - menuPathView.count);
                    console.log (currentIndex + indexOffset - menuPathView.count + " is highlighted")
                }

//                highLightAni.paused = false
                menuHLMid.visible = true
            }

            Item {
                id: menuHighlight
                anchors.fill: parent
                opacity: 1


//                Rectangle {
//                    id: menuHLUp
//                    width: parent.width
//                    anchors.top: parent.top
//                    anchors.bottom: menuHLMid.top
//                    opacity: 0.5
//                    //z: 1

//                    gradient: Gradient {
//                        GradientStop {position: 0.5; color: "black"}
//                        GradientStop {position: 0.9; color: "darkgray"}
//                        GradientStop {position: 1.0; color: "white"}
//                    }
//                }

                Rectangle {
                    id: menuHLMid
                    width: parent.width - 5
                    height: menuPathView.menuHeight + 3
                    anchors.verticalCenter: parent.verticalCenter
//                    anchors.horizontalCenter: parent.horizontalCenter
                    x: 4
                    radius: 15

                    SequentialAnimation on color {
                        id: highLightAni
                        loops: Animation.Infinite
                        ColorAnimation { from: "skyblue"; to: "darkblue"; duration: 1300; }
                        ColorAnimation { from: "darkblue"; to: "skyblue"; duration: 1300; }
//                        PauseAnimation {}
                    }
                }

//                Rectangle {
//                    id: menuHLDown
//                    width: parent.width
//                    anchors.top: menuHLMid.bottom
//                    anchors.bottom: parent.bottom
//                    opacity: menuHLUp.opacity
//                    //z: menuHLUp.z

//                    gradient: Gradient {
//                        GradientStop {position: 0.0; color: "white"}
//                        GradientStop {position: 0.1; color: "darkgray"}
//                        GradientStop {position: 0.5; color: "black"}
//                    }
//                }
            }

        }

    }
